<!--
 * @Description: 详情
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-08-14 20:18:51
 * @FilePath: /yuxiuproweb/src/views/money/wage/mods/detail.vue
-->
<template>
  <el-drawer title="详情" size="100%" :visible.sync="shows">
    <el-form
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="false"
      label-width="68px"
    ></el-form>
    <div style="margin: 0 20px 20px">
      <el-table
        :data="list"
        v-loading="loading"
        :max-height="maxHeight + 100"
        border
      >
        <el-table-column
          type="index"
          label="序号"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column
          label="加工记录id"
          prop="orderId"
          align="center"
        ></el-table-column>
        <el-table-column
          label="姓名"
          prop="name"
          align="center"
        ></el-table-column>
        <el-table-column
          label="金额"
          prop="wage"
          align="center"
        ></el-table-column>
      
        <el-table-column
          label="时间"
          prop="createTime"
          align="center"
          min-width="120"
        ></el-table-column>
        
      </el-table>
      <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    </div>
  </el-drawer>
</template>

<script>
import { recordList } from "@/api/money/catWage";
import commonMix from "@/utils/mixins/common";
export default {
  mixins: [commonMix],
  props: {
    show: Boolean,
    data: {
      type: Object,
    },
    queryParams: {
      type: Object,
      pageNum: 1,
        pageSize: 100,
        name: null,
    },
    
  },
  data() {
    return {
      list: [],
      loading: false,
      total: 0,
    };
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      const params = {
        ...this.queryParams,
        type: undefined,
        pageNum: 1,
        pageSize: 20,
        yearMonth:
          this.queryParams.type === "1"
            ? this.queryParams.yearMonth
            : undefined,
        startDate:
          this.queryParams.type === "2"
            ? this.queryParams.startAndEnd?.[0]
            : undefined,
        endDate:
          this.queryParams.type === "2"
            ? this.queryParams.startAndEnd?.[1]
            : undefined,
        startAndEnd: undefined,
      };
      this.loading = true;
      recordList({
        name: this.data.name,
        ...params,
      })
        .then((response) => {
          console.log(response.rows);
          this.list = response.rows || [];
          this.total = response.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  margin: 0 20px;
}
.drawer-form {
  ::v-deep {
    .el-form-item {
      margin-bottom: 0;
      margin-right: 0;
      input {
        text-align: left;
      }
    }
    .el-collapse-item__header {
      height: 65px;
      line-height: 65px;
      font-size: 16px;
    }
  }
}
.dialog-footer {
  display: flex;
  justify-content: right;
  margin: 20px;
}
</style>
 